<template>
	<view>
		<u-search placeholder="输入单号搜索" v-model="searchNumber" @search="getData" :show-action="false"></u-search>
		<u-empty class="empty" text="暂无数据" mode="list" v-show="formData.length===0"></u-empty>
		<view class="order-list" v-for="item in formData" :key="item.id">
			<view class="box">
				<view class="order" @click="copy(item.number)">订单号:{{item.number}}</view>
				<view class="name-phone">
					<view>收件人姓名:{{item.receiverName}}</view>
					<view>收件人电话:{{item.receiverPhone}}</view>
				</view>
				<view class="name-phone">
					<view>寄件人姓名:{{item.senderName}}</view>
					<view>寄件人电话:{{item.senderPhone}}</view>
				</view>
				<view class="time-state">
					<view>更新时间:{{formatTime(item.updateTime)}}</view>
					<view>物流状态:{{$state(item.state)}}</view>
				</view>
				<view class="button">
					<u-button size="mini" @click="detail(item)">详情</u-button>
				</view>
			</view>
		</view>
		<pagination ref="Pagination" @update="getData"></pagination>
	</view>
</template>

<script>
	import uniCopy from '@/js_sdk/xb-copy/uni-copy.js'
	import pagination from '@/components/pagination/index.vue'
	import {
		format
	} from '@/utils/silly-datetime.js'

	export default {
		components: {
			pagination
		},
		data() {
			return {
				formData: [],
				searchNumber: '',
				state: 0, // 状态 (0未验货 1已验货)
				type: 1, // 寄件种类 (0国内寄件 1老挝-中国 2中国-老挝)
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			copy(content) {
				uniCopy({
					content: content,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})
			},
			getData() {
				let pagination = this.$refs.Pagination
				let param = {
					number: this.searchNumber,
					current: pagination.current,
					size: 10,
					state: this.state,
					type: this.type
				}
				this.$api.pageCourierMailApi(param).then(result => {
					let response = result.resultParam.mailPage
					this.formData = response.records
					pagination.total = response.total
				})
			},
			detail(obj) {
				uni.navigateTo({
					url: `/pages/detail_mail/index?number=${obj.number}`,
					animationType: "zoom-fade-out",
					animationDuration: 100
				})
			},
			formatTime(time) {
				if (!time) return '';
				return format(time, 'YYYY-MM-DD HH:mm:ss');
			}
		}
	}
</script>

<style lang="scss">
	.empty {
		padding: 50%;
	}

	.order-list {
		.box {
			background-color: #FFFFFF;
			border-radius: 10rpx;
			margin: 10rpx;
			padding: 10rpx;
			font-size: 28rpx;
		}

		.order {
			font-size: 34rpx;
			font-weight: bold;
		}

		.name-phone,
		.time-state {
			display: flex;
			justify-content: space-between;
		}

		.button {
			text-align: right;
			margin-top: 10rpx;
		}
	}
</style>
